<template>
	<view>
		<!-- <view class="tn-margin-sm">
			<tn-swiper :list="banners" imageMode="scaleToFill" :height="300" :effect3d="false" mode="dot"></tn-swiper>
		</view> -->
		<view class="content_center">
			<view class="flex justify-between">
				<text class="titleStyle">传道</text>
				<text @click="toListCourse()">更多<text class="cuIcon-right"></text></text>
			</view>
			<view class="margin-top-lg content_bottmon flex " >
				<view class="cu-chat course" v-for="item in homeCoures" :key="item.id" @click="goChapterlsit(item)">
					<view class="Box_img">
						<image :src="item.thumb_image"/>
					</view>
					<view class="flex flex-direction courseInformation">
						<text class="title">{{item.name}}</text>
						<text class="author">{{item.author}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content_center cu-chat">
			<view class="flex justify-start">
				<text class="titleStyle">安全评价</text>
			</view>
			<view class="flex flex-wrap justify-center margin-top-lg">
				<view class="safe_item"  v-for="i in 4" :key="i">
					<text class="cuIcon-safe">瓦斯抽采安全评判</text>
				</view>
			</view>
		</view>
		<login ref="login" @succ="succ"></login>
		<view class='tn-tabbar-height'></view>
		<!-- 底部导航栏组件 -->
		<tabbar :theme="tabbarStyle"></tabbar>
	</view>
</template>

<script>
	import { getHomeBanner , getHomeCourseList ,skipQuestion} from '@/api/index.js'
	export default {
		components: {
		},
		data() {
			return {
				homeCoures:[],//首页课程
				banners: [], //轮播图
				isLogin:false
			}
		},
		onLoad(e) {

		},
		onPageScroll(e) {
	
		},
		onShow(){
			if (uni.getStorageSync('token')) {
				this.isLogin = true
			} else {
				  
				this.$nextTick(() => {
					this.$refs.login.modal = true;
				})
			}
			this.gethomeBanner() //获取轮播图
			this.getCourseList() //获取首页课程
		},
		methods: {
			succ(data){
				this.getCourseList() //获取首页课程
			},
			//判断当前教材是否答题，已答题去章节列表，未答题去答题页
			goChapterlsit(item){
				if(item.skip_status == 1){
					uni.navigateTo({
					  url: `/pages/chapterPage/chapterPage?course_id=${item.id}`
					})
				}else{
					//添加弹框状态
					uni.showModal({
						title: '提示',
						content: '学习前需要进行测试，会根据测试结构推荐学习内容',
						cancelText:'跳过答题',
						confirmText:'去答题',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:`/pages/paper/paper?course_id=${item.id}`
								})
							} else if (res.cancel) {
								// 跳过答题
								skipQuestion({course_id:item.id}).then((res)=>{
									if(res.data.code == 1){
										// uni.showToast({
										// 	title: '跳过成功',
										// 	icon: 'success',
										// 	duration: 2000
										//  })
										 uni.navigateTo({
										 	url:`/pages/chapterPage/chapterPage?course_id=${item.id}`
										 })
									}
								})
							}
						}
					});
				}
			},
			// 替换数组中对象的属性名称
			renamePropertyInArray(array, oldKey, newKey) {
			  return array.map(item => ({
				...item,
				[newKey]: item[oldKey],
				// 删除旧的键
				...((delete item[oldKey], {}))
			  }));
			},
			async gethomeBanner(){
				let that = this
				const res = await getHomeBanner()
				if(res.data.code == 1){
					// 使用函数替换属性名称
					const updatedArray = that.renamePropertyInArray(res.data.data.data, 'thumb_image', 'image');
					// this.banners = updatedArray
				}
			},
			async getCourseList(){
				let that = this
				const res = await getHomeCourseList()
				if(res.data.code == 1){
					that.homeCoures = res.data.data.data.slice(0, 8) //获取数组前8调数据
				}
			},
			//更多-跳转
			toListCourse(){
				uni.reLaunch({
				  url: '/pages/manyCourse/manyCourse'
				});
				uni.hideHomeButton()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}
	.titleStyle{
		font-size: 18px;
		font-weight: bold;
	}
	.content_center{
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		.content_bottmon{
			display: grid;
		    grid-template-columns: repeat(4, 1fr); /* 每行4个等宽的列 */
		    gap:15rpx; /* 元素之间的间距 */
			// display: flex;
			// overflow: hidden; /* 隐藏溢出的内容 */
			// white-space: nowrap; /* 不换行 */
			.course{
				// border: 1px solid red;
				// height: 290rpx;
				margin-bottom: 10rpx;
				// margin-right: 20rpx;
				.Box_img{
					// border: 1px solid red;
					border: 1px solid lightgrey;
					// width: 100%;
					height: 190rpx;
					margin-bottom: 20rpx;
					border-radius: 3px;
					image{
						border-radius: 3px;
						width: 100%;
						height: 100%;
					}
					
				}
			}
		}
		.courseInformation{
			.title{
				// border: 1px solid red;
				// text-align: center;
				width:155rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				overflow: hidden; /* 隐藏溢出的内容 */
				white-space: nowrap; /* 不换行 */
				text-overflow: ellipsis; /* 超出部分显示省略号 */
			}
			.author{
				font-size: 22rpx;
				color: gray;
			}
		}
		.safe_item{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 290rpx;
			height: 70rpx;
			line-height: 70rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			background: #EDF2FE;
			border-radius: 12rpx;
			text{
				font-weight: 400;
				font-size: 28rpx;
				color: #2F3339;
			}
		}
	}
	
</style>